<%--
  Created by IntelliJ IDEA.
  User: limin
  Date: 2021/8/8
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">

    <title></title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">

    <script src="js/jquery-1.8.0.js"></script>
    <link rel="stylesheet" href="css/maintable.css">
    <link rel="stylesheet" type="text/css" href="css/edittable.css"  >
    <link rel="stylesheet" type="text/css" href="css/validate.css"  >
    <script>
        $(function(){
            $("input[type=text],textarea").focus(function(){
                $(this).addClass("input_focus");
            }).blur(function(){
                $(this).removeClass("input_focus");
            });

            $(".form_btn").hover(function(){
                    $(this).css("color","red").css("background","#6FB2DB");
                },

                function(){
                    $(this).css("color","#295568").css("background","#BAD9E3");
                });
        });
    </script>
    <script>
        function setImagePreview(docObj,localImagId,imgObjPreview,width,height){
            if (docObj.files && docObj.files[0]){
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = width;
                imgObjPreview.style.height = height;
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }else {
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                localImagId.style.width = width;
                localImagId.style.height = height;
                try{
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlpahImageLoader").src = imgSrc;
                }catch (e) {
                    alert("您上传的图片格式不正确，请重新选择！")
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }

        $(function (){
            $.ajax({
                type:"post",
                url:"CateServlet.do",
                data:{
                    flag: "getCate",
                    parentId:"0"
                },
                dataType:"json",
                success:function (cate){
                    $("#bigCateId").empty();
                    $("#bigCateId").append("<option value=''>==请选择一级分类==</option>");
                    $.each(cate,function (k,cate){
                        $("#bigCateId").append("<option value='"+cate.id+"'>"+cate.cateName+"</option>");
                    })
                },
                error:function (){
                    alert("出错了")
                }
            })
        })

        $(function (){
            $("#bigCateId").change(function (){
                if ($("#bigCateId").val()==""){
                    $("#smallCateId").empty();
                    $("#smallCateId").append("<option value=''>== 请选择二级分类==</option>");
                }else{
                    $.ajax({
                        type: "post",
                        url:"CateServlet.do",
                        data: {
                            flag:"getCate",
                            parentId: this.value
                        },
                        dataType: "json",
                        success:function (cate){
                            $("#smallCateId").empty();
                            $("#smallCateId").append("<option value=''>==请选择二级分类==</option>");
                            $.each(cate,function (k,cate){
                                $("#smallCateId").append("<option value='"+cate.id+"'>"+cate.cateName+"</option>");
                            })
                        }
                    })
                }
            })
        })
    </script>

</head>

<body>
<div class ="div_title">
    <div class="div_titlename"> <img src="images/san_jiao.gif" ><span>添加商品</span></div>
</div>
<form action="GoodsServlet.do?flag=add" method="post" enctype="multipart/form-data">
    <table class="edit_table">
        <tr>
            <td class="td_info" style="width: 10%">商品名称：</td>
            <td>
                <input type="text" name="goodsName">
            </td>
        </tr>
        <tr>
            <td class="td_info">商品分类：</td>
            <td>
                所属大分类：<select name="bigCateId" id="bigCateId"></select>
                所属小分类： <select name="smallCateId" id="smallCateId">
                <option value="">==请选择二级分类==</option>
            </select>
            </td>
        </tr>
        <tr>
            <td class="td_info">计量单位：</td>
            <td>
                <input type="text" name="unit">
            </td>
        </tr>
        <tr>
            <td class="td_info">商品价格：</td>
            <td>
                <input type="text" name="price">
            </td>
        </tr>
        <tr>
            <td class="td_info">生产厂商：</td>
            <td>
                <input type="text" name="producter">
            </td>
        </tr>
        <tr>
            <td class="td_info">商品图片：</td>
            <td>
                <input type="file" name="picture" onchange="setImagePreview(this,localImag,preview,'100px','125px');">
                <div id="localImag" style="margin-left: 24px"></div>
                <img id="preview" src="GoodsServlet.do?flag=showPicture&goodsId=${goodsId}" alt="请上传图片">
            </td>
        </tr>
        <tr>
            <td class="td_info">备注信息：</td>
            <td>
                <textarea name="des" ></textarea>
            </td>
        </tr>
        <tr>
            <td class="td_info"></td>
            <td>
                <input type="submit" value="提交" class="form_btn">
                <input type="button" class="form_btn" onclick="window.history.back()" value="返回">
            </td>
        </tr>
    </table>
</form>
${msg}
</body>
</html>
